1
00:00:00,600 --> 00:00:02,950
Hello and welcome to this lecture.

2
00:00:03,150 --> 00:00:14,130
In this lecture or we are going to create a function for the contact form that war enable someone to

3
00:00:14,280 --> 00:00:19,920
enter the details and also submit the details on the form.

4
00:00:20,010 --> 00:00:26,150
It will then save it to the local storage on the local machine.

5
00:00:29,950 --> 00:00:32,150
So this is what the farm looks like at the moment.

6
00:00:32,150 --> 00:00:38,750
At the moment it's not very functional so we can see typing details in here.

7
00:00:38,910 --> 00:00:42,220
Send that body tool not go way.

8
00:00:42,370 --> 00:00:51,880
So in this lecture we're going to implement local storage before we begin we are to have a script.

9
00:00:51,880 --> 00:01:00,110
Let me just open up the index case to a male file and just highlight something for you.

10
00:01:00,140 --> 00:01:06,350
We created the class for me just good through that.

11
00:01:06,400 --> 00:01:12,730
So we have a class here called stored stort.

12
00:01:13,070 --> 00:01:21,830
And about Tash that class two or the labels like the name feel the email field and the message fill

13
00:01:21,910 --> 00:01:24,110
divorce class taught.

14
00:01:24,130 --> 00:01:34,450
So what this will be the this war allowed the form elements to be stored so any where you have the class

15
00:01:34,450 --> 00:01:46,390
stored you use the data submitted to that will be stored in use in this stored class.

16
00:01:46,420 --> 00:01:53,600
So what I am going to do here in this lecture or like previous ones is just to save time again is explained

17
00:01:53,600 --> 00:01:57,760
the code as I copy chunks of the code in.

18
00:01:57,940 --> 00:02:00,230
So we're going to we're going could be using.

19
00:02:00,250 --> 00:02:04,600
Query Jake Query is a javascript library.

20
00:02:04,600 --> 00:02:12,370
We've already got a reference to the library via the go see the in which is a content delivery network

21
00:02:12,640 --> 00:02:14,980
so there's no need to install it.

22
00:02:15,070 --> 00:02:19,860
So the first thing I am pasting here is this code here.

23
00:02:20,040 --> 00:02:27,290
Any way you see the dollar sign know that you are referencing a query library.

24
00:02:27,310 --> 00:02:30,000
So basically what this does.

25
00:02:30,040 --> 00:02:39,270
This code here and this document here is what's passed into the code and the ready method.

26
00:02:39,280 --> 00:02:48,270
What that does it checks Joe query checks to make sure that the web page is fully loaded before record

27
00:02:48,440 --> 00:02:49,340
executes.

28
00:02:49,490 --> 00:02:56,950
It doesn't want the code to execute prematurely so that this is used to check that he looks out fully

29
00:02:56,950 --> 00:03:05,470
paid and make sure that the content of the page is loaded fully before it notifies jaquie to inject

30
00:03:05,530 --> 00:03:07,810
the code or to use the code.

31
00:03:07,900 --> 00:03:12,990
So before any javascript is javascript code is executed.

32
00:03:13,190 --> 00:03:22,550
This here I want is used to check that the document is ready so that the code does not execute too early.

33
00:03:22,600 --> 00:03:29,770
I have pasted some coding from line to 2 line 14.

34
00:03:29,980 --> 00:03:33,870
So I'll just explain what's going on here.

35
00:03:34,330 --> 00:03:42,760
Okay so basically what's happening here is that a function called it in it is a function the function

36
00:03:42,760 --> 00:03:47,430
code in it is run when the page is first loaded.

37
00:03:47,440 --> 00:03:48,890
So what this function does.

38
00:03:48,910 --> 00:03:54,870
It checks to see if any data is stored for each of the field.

39
00:03:55,170 --> 00:04:01,750
And if there is data it and the data to the relevant form element

40
00:04:03,990 --> 00:04:06,250
so so you can see here.

41
00:04:06,280 --> 00:04:07,480
This is what it does.

42
00:04:07,480 --> 00:04:10,330
So this is any time between this column.

43
00:04:10,420 --> 00:04:12,570
This is a main calling process here.

44
00:04:12,760 --> 00:04:17,530
So this is it and this is when the image function is called.

45
00:04:17,560 --> 00:04:19,490
So to call this function here.

46
00:04:19,600 --> 00:04:21,820
This is what is the house specified.

47
00:04:21,970 --> 00:04:27,800
He just write the name of the function followed by parentheses and it will call the function.

48
00:04:27,820 --> 00:04:31,990
So I've said here like 3 that if k.

49
00:04:32,020 --> 00:04:33,540
If the local storage.

50
00:04:33,550 --> 00:04:43,210
Name three is the name that has been entered by someone if the name is there's something there.

51
00:04:43,330 --> 00:04:46,090
Here the dollar sign here is a joke query.

52
00:04:46,100 --> 00:04:49,370
Inside here is Heidi.

53
00:04:49,480 --> 00:04:56,620
So it looks for these selectorial here this select or Heidi code name and it evaluates it.

54
00:04:56,890 --> 00:05:03,870
If there is a matching date if there's anything entered it will put it inside local storage on that

55
00:05:04,000 --> 00:05:04,780
title.

56
00:05:04,870 --> 00:05:07,200
Name the same thing here.

57
00:05:07,420 --> 00:05:13,930
If it searches for this Heidi email it to evaluate it and put it in local storage.

58
00:05:14,020 --> 00:05:15,980
That is Title email.

59
00:05:16,060 --> 00:05:21,860
So for example if you've got several emails typed in this is an arena where you see square brackets

60
00:05:22,360 --> 00:05:27,680
you are referring to an array so these are harrie's square brackets.

61
00:05:27,830 --> 00:05:32,070
Is it they can contain more than one value.

62
00:05:32,360 --> 00:05:33,790
Okay.

63
00:05:34,580 --> 00:05:42,770
In the same process here he checks if there's any message in this him this.

64
00:05:42,860 --> 00:05:53,030
Heidi here quod message if there is a valid set policy into a local storage on the key or label message.

65
00:05:53,070 --> 00:05:58,700
Right so that's basically how this inmate function works.

66
00:06:08,030 --> 00:06:10,770
So the function is defined online too.

67
00:06:10,900 --> 00:06:15,750
And it is called on line for teaching.

68
00:06:16,810 --> 00:06:17,490
Okay.

69
00:06:17,490 --> 00:06:23,820
So I've said on the code in from line 16 to 19.

70
00:06:24,310 --> 00:06:28,510
Basically what this code is code is doing here.

71
00:06:29,160 --> 00:06:41,100
So what's happening here is that the this code here this chain this does this here is the class that

72
00:06:41,250 --> 00:06:43,930
is attached to each of the labels.

73
00:06:44,040 --> 00:06:48,170
The message they like the message the email and the name.

74
00:06:48,180 --> 00:06:51,280
This class has the query here.

75
00:06:51,300 --> 00:06:56,000
Inside there is the Selecter.

76
00:06:56,340 --> 00:07:04,010
So this function here what the change is is a change event full function.

77
00:07:04,020 --> 00:07:11,730
Basically what that does the change event only occurs when the value of an element has been changed.

78
00:07:11,740 --> 00:07:18,810
It usually works with inputs text area select and so on usually with form elements.

79
00:07:18,810 --> 00:07:23,140
This is used so looks out for a change in event.

80
00:07:23,280 --> 00:07:26,760
So what does it all check if there's any change.

81
00:07:26,760 --> 00:07:33,000
The function will then add the date that has been imported in to local storage

82
00:07:35,400 --> 00:07:36,360
here.

83
00:07:36,450 --> 00:07:39,480
This allows and then this.

84
00:07:39,690 --> 00:07:42,920
What this is this is really is this select.

85
00:07:42,930 --> 00:07:45,010
It is his view references.

86
00:07:45,270 --> 00:07:53,880
The quadrent hastier elements where you see these use is reference to the current amount limit.

87
00:07:53,940 --> 00:07:57,030
So this is dot and then this is the attribute.

88
00:07:57,030 --> 00:07:59,880
This is the name all right.

89
00:08:00,060 --> 00:08:05,610
So basically what's happening here is the level of function here the function checks to see if there's

90
00:08:05,610 --> 00:08:11,390
any change and then pops the change into all local storage.

91
00:08:12,330 --> 00:08:14,280
Okay so we're done now.

92
00:08:14,290 --> 00:08:18,730
You just need to save always save your work.

93
00:08:18,840 --> 00:08:19,990
Click save.

94
00:08:20,090 --> 00:08:27,820
Hall then lunch the form and see and then.

95
00:08:27,830 --> 00:08:36,000
Now we should be able to type some pin in your case so you of what we type have just typed in a name

96
00:08:36,010 --> 00:08:42,060
here James Bond email James double of 7 and this is a message.

97
00:08:42,070 --> 00:08:44,250
So in effect 6.

98
00:08:45,570 --> 00:08:49,590
Okay and this and then I click reset.

99
00:08:49,860 --> 00:08:54,590
I go to the browser now just to F 12.

100
00:08:55,750 --> 00:08:59,080
Okay so the form has been submitted.

101
00:08:59,310 --> 00:09:03,010
These are the contents so this was what was typed in for the email.

102
00:09:03,240 --> 00:09:12,240
James had double or seven dot com and the message had said where is a party hat and the name was James

103
00:09:12,240 --> 00:09:24,230
Bond So it has saved what I typed in the form into local storage so that's it for this project.

104
00:09:24,580 --> 00:09:32,850
Creating a contact form local storage please feel free to contact me if you have any issues at all.

105
00:09:33,060 --> 00:09:36,190
Be more than happy to help Michael.

106
00:09:36,240 --> 00:09:38,520
You know you are not overwhelmed by it all.

107
00:09:38,550 --> 00:09:40,320
Feel free to contact me.

108
00:09:40,320 --> 00:09:47,300
I really would love to help take care of the best and I hope it has been useful.

109
00:09:47,310 --> 00:09:49,190
Bye for now.